<template>
    <view>
        <view v-show="isShow1"><van-notice-bar  text="这是您的购物车清单，更多惊喜等着您！这是您的购物车清单，更多惊喜等着您！这是您的购物车清单，更多惊喜等着您！" :scrollable="false" left-icon="volume-o" /></view>
        <view  v-show="isShow2"> <van-notice-bar  text="您的购物车是空的，快去选购商品吧！" :scrollable="false" left-icon="volume-o" />
           
        </view> 
        <van-checkbox-group :value="result" @change="selectGoods">
            
        <view class="big" v-for="item in ShoppingCart" :key="item.id">
            <van-checkbox id="check" checked-color="#e98f3b" :name="item"></van-checkbox>
            <van-card class="card" :num="item.num" :price="item.price+'/500g'" :desc="item.desc" :title="item.title" :thumb="item.thumb">
                
                <template #tags>
                    <van-image  width="5rem"  height="5rem" :src="imgUrl+item.image" />            
                    <van-tag class="name" plain size="large" type="success" >{{item.name}}</van-tag>
                    <van-stepper class="bujinqi" :value="item.quantity" @minus="minus(item.id)" @plus="add(item.id)" @change="addNum" />
                </template>
                <template #footer>
                    <van-button class="btn" type="danger" @click="buy(item.id,item.quantity)" size="mini">单独购买</van-button>
                    <van-button class="btn" type="danger" @click="mydelete(item.id)" size="mini">删除</van-button>
                </template>
            </van-card>
        </view>  
        </van-checkbox-group>
        <!-- -->
        <view class="em"></view>
        <view v-show="isShopArrNone">
            <van-submit-bar :price="sumPrice"  button-text="提交订单" @submit="onSubmit" :tip="true">
            </van-submit-bar>
        </view>
        
    </view>
</template>
<script>
const url = 'http://47.108.197.149:8081'
export default {
    data(){
        return{
            name:'商品',
            count:'0.00', //暂时没用
            ShoppingCart:[], //本页面的商品购物车  （自己声明的）
            goodsNum:'', //商品个数
            num:'',   //步进器的num
            imgUrl : 'http://47.108.197.149:8080/images/',
            result:[]
        }
    },
    computed:{
        isShopArrNone() {  //判断购物车长度，是否显示提交订单按钮
        if (this.ShoppingCart.length == 0) {
            return false;
        } else {
            return true;
        }
        },
        isShow1() { //判断购物车长度，选择显示什么通知信息
        if (this.ShoppingCart.length == 0) {
            return false;
        } else {
            return true;
        }
        },
        isShow2() { //判断购物车长度，选择显示什么通知信息
        if (this.ShoppingCart.length == 0) {
            return true;
        } else {
            return false ;
        }
        },
        sumPrice() { //计算总价
        let priceArr = this.ShoppingCart.map((item) => {      
            return item.quantity* item.price * 100;
        });
        let sum = 0;
        priceArr.forEach((item) => {
            sum += item;
        });
        return sum;
        },
    },
    methods:{
        selectGoods(e){
            this.result = e.detail
            console.log(e.detail)
            console.log(e)
        },
        onSubmit(){    //提交订单的按钮方法
            // console.log(1)
        },
        mydelete(id){  //点击购物车里card里删除按钮得到对应的id
            let _this = this
            uni.request({
                url:url+'/app/cart/deleteById ',
                method:'POST',
                data:{
                    'id':id
                },
                success:res =>{
                    this.getCart()
                }
            })
        },
        buy(id,num){     //点击单独购买得到对应的id
            this.num == "" ? num = num : num = this.num
            uni.request({
                url:url+'/app/cart/updateQuantity',
                method:'POST',
                data:{
                    id:id,
                    quantity:num
                },
                success:res =>{
                    this.getCart()
                }
            })
        },
        addNum(e){   //步进器的方法获得当前几个
            this.num = e.detail
        },
        add(id){
            // console.log(id)
            uni.request({
                url:url+'/app/cart/addQuantity',
                method:'POST',
                data:{
                    id:id,
                },
                success:res =>{
                    this.getCart()
                }
            })
        },
        minus(id){
            // console.log(id)
            uni.request({
                url:url+'/app/cart/subtractQuantity',
                method:'POST',
                data:{
                    id:id,
                },
                success:res =>{
                    this.getCart()
                }
            })
        },
        getCart(){
            // 请求购物车数据,并将数据放在本页面中的ShoppingCart（本页面存放购物车数据的数组）
            let _this = this
            let userId = getApp().globalData.userInfo[0].userId
            uni.request({
                url:url+'/app/cart/cartList',
                method:'post',
                data:{
                    userId:userId
                },
                success (res){
                    getApp().globalData.UserShopArr = res.data.list 
                    let arr = getApp().globalData.UserShopArr
                    _this.ShoppingCart = arr
                }
            })
        },
        toMain(){
            uni.switchTab({
                url: '../Main/Main'
            });
        },
    },
    
    onLoad:function(){
        // this.getCart()
    },
    onPullDownRefresh(){
        this.getCart()
    },
    onTabItemTap(item){
        this.getCart()
    }
}
</script>
<style scoped>
    .mm{
        color: red;
        color: #e98f3b;
    }
    .em{
        height: 100rpx;
        width: 100%;
    }
    .bujinqi{
        float: right;
        margin-top: 50rpx;
    }
    .btn{
        margin: 0 10rpx;
    }
    .card{
        margin-top: 10rpx;
        background-color: rgb(172, 169, 169);
    }
    .name{
        margin-left: 50rpx; 
    }
    .go{
        margin-left: 42%;
        margin-top: 300rpx;
    }
    #check{
        position: absolute;
        top: 50rpx;
        z-index: 1000;
    }
    .big{
        position: relative;
    }
</style>